<template>
  <div class="event-wrapper" @click.self="addPoint">
    <!-- 事件回调直接写方法名 -->
    <button @click="add">ADD</button>
    <br/>
    <!-- 监听事件v-on:事件名称,v-on可以缩写成@ -->
    <button v-on:click="onClick">不传参数</button>
    <br/>
    <button v-on:click="onClick('我是参数')">添加参数</button>
    <br/>
    <button v-on:click="onClick()">添加空参数</button>
    <br/>
    <!-- 不传参数时,Vue会默认传$event -->
    <button v-on:click="onClick($event)">添加$event参数</button>
    <br/>
    <input v-on:input="onInput" @change="onInput" @blur="onInput" />
    <ul class="list">
      <li v-for="(d,i) in list" :key="i" :style="{'top':d.y+'px','left':d.x+'px'}"></li>
    </ul>
    <!-- 事件修饰符可多个并用 -->
    <a href="https://baidu.com" target="_blank" @click.prevent.stop="goBaidu">去百度</a>
    <!-- 回车/enter时候触发 -->
    <form>
      <input placeholder="用户名" />
      <input type="password" placeholder="密码" @keyup.enter="onInput" />
    </form>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        num: 999,
        list:[
          {
            x:100,
            y:100
          },
          {
            x:150,
            y:200
          }
        ]
      }
    },
    /* 组件实例this的属性:
        $el: 组件的根标签
        Vue会把data和methods中的属性展开,挂在this上面
    */
    methods:{
      addPoint(event){
        // if(event.target!==event.currentTarget) return
        this.list.push({
          x:event.clientX,
          y:event.clientY
        })
      },
      add(){
        console.log(this);
        //直接通过this访问data
        this.num++
      },
      onClick(event){
        // 事件监听时, 默认的参数是事件对象
        console.log(event);
      },
      onInput(event){
        console.log('当前的输入值: ',event.target.value,'事件名称: ',event.type);
      },
      goBaidu(){
        // event.preventDefault()
        // event.stopPropagation()
      }
    }
  }
</script>

<style lang="sass" scoped>
.event-wrapper
  min-height: calc( 100vh - 80px )
.event-wrapper input
  border: 1px solid #666
.event-wrapper .list li
    position: fixed
    width: 10px
    height: 10px
    background: pink
</style>
